<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        /* 通配符：让所有元素之间的间距都是20px */
        *{
            margin-top: 20px;
        }
        .demo1{
            /* 设置高度 */
            height: 50px;
            /* 设置背景色 */
            background-color: skyblue;
        }
        .box1{
            /* 设置边框 */
            padding: 5px;
            /* 设置背景色 */
            background-color: skyblue;
        }
        .box2{
            /* 设置边框 */
            padding: 5px;
            /* 设置背景色 */
            background-color: orange;
        }
        .demo2{
            width: 200px;
            height: 200px;
            background-color: green;
            /* 形成滚动条 */
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- 
        Vue中的事件修饰符
            1.prevent：阻止默认事件（常用）
            2.stop：阻止事件冒泡（常用）
            3.once：事件只触发一次（常用）
            4.capture：使用事件的捕获模式
            5.self：只有event.target是当前操作的元素时才触发事件
            6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕
            注意：修饰符可以连续写,如：@click.stop.prevent
     -->

    <div id="root">
        <h2>欢迎来到{{name}}</h2>
        <!-- 1.prevent：阻止默认事件（常用） -->
        <a href="https://baidu.com" @click.prevent="showInfo">百度一下</a>

        <!-- 2.stop：阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <!-- <button @click.stop="showInfo">百度一下</button> -->
            <!-- 先阻止事件冒泡，在阻止默认事件，顺序没有要求 -->
            <a href="http://baidu.com" @click.stop.prevent="showInfo">百度一下</button>
        </div>

        <!-- 3.once：事件只触发一次（常用） -->
        <button @click.once="showInfo">百度一下</button>

        <!--  4.capture：使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMessage(1)">
            百度一下
            <div class="box2" @click="showMessage(2)">
                百度两下
            </div>
        </div>

        <!--  5.self：只有event.target是当前操作的元素时才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">百度一下</button>
        </div>

        <!-- 
            wheel:鼠标滑轮滚动,多适用于手机平板
            scroll:进度条滚动
            6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕
         -->
        <ul @scroll.passive="demo3" class="demo2"> 
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

</body>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data:{
            name: '百度',
            url: 'https://baidu.com'
        },
        methods:{
            showInfo(event){
                // event.preventDefault() 阻止默认事件 使用vue的@click.prevent代替
                // event.stopPropagation() 阻止事件冒泡, 使用vue的@click.stop代替
                alert('你好，中国')
                console.log(event.target)
            },
            showMessage(message){
                console.log(message)
            },
            demo3(){
                // console.log('滑动一次')
                for (let index = 0; index < 1000; index++) {
                    console.log('回调函数：滑动一次')
                }
                console.log('累坏了')
            }
            
        }
    })
    console.log(vm);
</script>

</html>